<template>
  <div class="wrapper">
    <div class="pageLog">
      <page-log></page-log>
    </div>
    <div class="main">
      <div class="row">
        <div class="cell req" style="margin-right: 40px">
          <div class="label">点位名称</div>
          <div class="value">
            <el-input placeholder="" v-model="potName">
              <!-- <div slot="suffix" class="priceUnit">万元</div> -->
            </el-input>
          </div>
        </div>
        <div class="cell req">
          <div class="label">设别IP</div>
          <div class="value">
            <el-input placeholder="" v-model="equipmentIP"> </el-input>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="cell req" style="margin-right: 40px">
          <div class="label">用户名</div>
          <div class="value">
            <el-input placeholder="" v-model="name"> </el-input>
          </div>
        </div>
        <div class="cell req">
          <div class="label">密码</div>
          <div class="value">
            <el-input placeholder="" v-model="password"> </el-input>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="cell req" style="margin-right: 40px">
          <div class="label">设备类型</div>
          <div class="value">
            <el-select
              class="wait-list__filter-item"
              v-model="equipmenType"
              placeholder="设备类型"
            >
              <el-option label="a" :value="1"></el-option>
              <el-option label="b" :value="2"></el-option>
            </el-select>
          </div>
        </div>
        <div class="cell req">
          <div class="label">协议类型</div>
          <div class="value">
            <el-select
              class="wait-list__filter-item"
              v-model="agreementType"
              placeholder="设备接入协议类型"
            >
              <el-option label="a" :value="1"></el-option>
              <el-option label="b" :value="2"></el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="row" style="margin: 15px 0">
        <button class="button" style="margin-right: 25px" @click="cancle">
          取消
        </button>
        <button class="button" @click="save">保存</button>
      </div>
    </div>
  </div>
</template>

<script>
import PageLog from "@/components/PageLog/index.vue";

export default {
  components: {
    PageLog,
  },
  data() {
    return {
      potName: "",
      equipmentIP: "",
      name: "",
      password: "",
      equipmenType: "",
      agreementType: "",
    };
  },
  computed: {
    commitRight() {
      if (!this.potName) {
        return "请输入点位名称";
      }
      if (!this.equipmentIP) {
        return "请输入设备IP";
      }

      if (!this.name) {
        return "请输入用户名";
      }

      if (!this.password) {
        return "请输入密码";
      }
      if (!this.equipmenType) {
        return "请选择设备类型";
      }
      if (!this.agreementType) {
        return "请选择协议类型";
      }
      return true;
    },
  },
  methods: {
    cancle() {},
    save() {
       if (this.commitRight && typeof this.commitRight === "boolean") {
      } else {
        this.$message({
          type: "info",
          message: this.commitRight,
        });
      }
    },
  },
};
</script>

<style scoped lang="scss" >
.wrapper {
  position: relative;
}
.main {
  padding: 30px 0 0 25px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.row {
  display: flex;
  flex-direction: row;
}
.cell {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  margin-top: 15px;
  .label {
    width: 110px;
    text-align: left;
  }
  .value {
    color: #8d8e99;
    .el-input {
      width: 180px;
    }
    .el-textarea {
      width: 350px;
    }
  }
  .priceUnit {
    line-height: 32px;
    font-family: PingFang SC;
    color: #000000;
    font-size: 12px;
  }
  &.req {
    .label {
      &::before {
        content: "*";
        color: red;
      }
    }
  }
}
.button {
  height: 30px;
  line-height: 30px;
  padding: 0 30px;
  color: #1996fa;
  background: #e6f1fc;
  border: 1px solid #d0e7fe;
  border-radius: 5px;
}
.el-select {
  width: 180px;
}
</style>
